ใบความร การใส ข อความลงในเว บเพจ

Transcription

1 ใบความร หน วยการเร ยนร ท 5 การใส ข อความลงในเว บเพจ

2 การใส ข อความลงในเว บเพจ ว ธ ใส ข อควมลงในเว บเพจสามารถทาได เหม อนก บโปรแกรมประเภท Microsoft Word ซ งเราสามารถ พ มพ ข อความท จ องการลงในพ นท สร างงานท นท ด งน 1. เป ดเว บเพจช อ indext.html บนหน าต างพาเนล File 2. วางเคอร เซอร ในต าแหน งท ต องการพ มพ ข อความ ซ งในแถวน เล อกวางคอล มน ด านซ ายแถวท 2 ของตารางหล ก 3. พ มพ ความท ต องการลงไป

3 จากน นให บ นท กเว บเพจ แล วทดลองแสดงผลบนเบราเซอร จะได ด งร ป ส งเกตว าข อความท พ มพ ลงไปน นไม ได อย ส วนบนของคอล มถ ด งน น ถ าต องการจ ดให อย ในต าแหน ง ส วนบน ทาได ด งน 1. เล อกคอล มน ท ต องการซ งในท น เล อกคอล มน ในตารางหล ก เม อเล อกแล วจะเก ดเส นขอบตารางย อย

4 2. คล กแท ก <td> ใน Tag Selector เพ อเปล ยนให เป นคอล มน ในตารางหล ก หล งคล กแท ก <td> แล วเส นกรอบส ดาจะล อมรอบคอล มน ในตารางหล กแทน 3. คล กเล อก Top ในช อง Vert เพ อจ ดร ปแบบให แสดงบนส ดของคอล มน

5 ข นบรรท ดใหม ในย อหน าเด ม บางคร งข อความท พ มพ ลงไปอาจยาวเต มบรรท ดหร อต องการข นบรรท ดใหม เราสามารถกด Enter ท ค ย บอร ดได ท นท แค ะระยะห างระหว างบรรท ดจะมากกว าปกต ซ งทาให ข อความท แสดงออกมาด ไม สวยงาม ด งน น ในโปรแกรม Dreamweaver จ งม คาส งท ช วยให ระยะห างระหว างบรรท ดน อยลง ซ งทาได ด งน 1. หากต องการข นย อหน าใหม (ระยะห างระหว าบรรท ดจะมากกว าปกต ) ให กด Enter ท ค ย บอร ด ได ท นท 2. หากไม ต องการข นย อหน าใหม (ระยะห างระหว างบรรท ดจะเท าเด ม) ให กด Shift + Enter ท ค ย บอร ด

6 เล อกข อความบนเว บเพจ การเล อกข อความบนเว บเพจทาได เช นเด ยวก บโปรแกรมประเภท Microsoft Office Word ด งน 1. เล อกท งบรรท ด ทาได โดยคล กท ต นบรรท ด 2. เล อกท งประโยค ทาได โดยด บเบ ลคล กบนปรโยคท ต องการ 3. เล อกเฉพาะท ต องการ ทาได โดยคล กเมาส ซ ายแล วลากคล มเฉพาะส วนท ต องการ

7 การจ ดร ปแบบข อความด วย Properties Inspector เราสามารถจ ดร ปแบบข อความท ต องการแสดงออกมาทางเบราเซอร ได โดยเล อกข อความท ต องการ หร อวางเคอร เซอร ตรงต าแหน งท จะพ มพ ข อความ แล วใช หน าต าง Properties Inspector ในการจ ดร ปแบบ ข อความตามสไตล ท ต องการ ด งน สไตล HTML สไตล CSS

8 การเล อกส ฟอนต ให ก บข อความ ข อความท แสดงบนเบราเซอร สามารถเล อกฟอนต ท จะใช งานได แต ฟอนต น นจะต องเป นฟอนต มาตรฐานเท าน น ห ามเป นฟอนต แปลกๆ เน องจากในเคร องของผ ชม อาจจะไม ม ฟอนต เหล าน น เม อข อความ เว บเพจปรากฏบนเบราเซฮร เบราเซอร ก จะด งฟอนต อ นท ม อย ในเคร องมาแสดงแทน ส าหร บฟอนต ภาษาไทยท น ยมใช ก นจะเป นฟอนต MS San Serif และ Tahoma เน องจากอ านและ แสดงผลได บนเบราเซอร ท กชน ด ซ งว ธ การเล อกฟอนต ให ก บข อความ ทาได ด งน 1. เล อกข อความท จะกาหนดช ดฟอนต 2. คล กเล อกช ดฟอนต ท ต องการใช ท ช อง Font ในหน าต าง Properties Inspector สไตล CSS

9 การปร บเปล ยนขนาดฟอนต เราสามารถเปล ยนขนาดฟอนต ของข อความให เหมาะสมก บการแสดงผลได โดยใช การจ ดร ปแบบ สไตล CSS ด งน 1. เล อกข อความท จะปร บเปล ยนขนาดฟอนต 2. เล อกขนาดต วอ กษรหร อพ มพ ค าลงไปในช อง Size บนหน าต าง Properties Inspector สไลต CSS จากน น จะปรากฏหน าต าง New CSS Rule ให กาหนดค ณสมบ ต เบ องต นของ CSS 3. ก าหนดช อเร ยกของสไตล ซ งควรต งช อเร ยกให สอดคล องก บส งท ให สไตล ไปก าหนด ในท น ใช ช อ leftsubmenu 4. คล กป ม OK

10 การเปล ยนส ฟอนต สาหร บข อความส วนท เป นห วข อหล กหร อห วข อย อย เราสามารถทาให เก ดความโดดเด น ได ด งน 1. เล อกข อความท จะเปล ยนส ฟอนต 2. คล ก บนหน าต าง Properties Inspector สไตล CSS 3. คล กเล อกส จากตารางส

11 การกาหนดล กษณะต วอ กษร การกาหนดล กษณะต วอ กษร ไม ว าจะเป นต วหนา ต วเอ ยง และล กษณะอ นๆ สามารถทาได ด งน 1. เล อกข อความท จะกาหนดล กษณะต วอ กษร 2. คล กเล อกล กษณะต วอ กษรบนหน าต าง Properties Inspector สไตล CSS

12 แทรกส ญล กษณ พ เศษในเว บเพจ เราสามารถแทรกส ญล กษณ พ เศษ อย างเช น (Copyright) หร อ (Trademark) ด วยการพ มพ ลง ในเว บเพจได ด งน 1. วางเคอร เซอร ตรงตาแหน งท ต องการแทรกส ญล กษณ พ เศษ 2. คล กแท บ Text บน Insert Bar

13 3. เล อกส ญล กษณ พ เศษท ต องการแทรกลงในเว บเพจในแถบ Characters จากน นส ญล กษณ พ เศษท เล อกจะถ กแทรกลงในตาแหน งท วางเคอร เซอร ด งร ป

14 จากน นพ มพ ข อความล ขส ทธ ต อท าย หากต องการจ ดให ข อความในบรรท ดอย ก งกลาง ท าได โดยวาง เคอร เซอร ลงในแถวน น แล วคล กเล อก Center ท ช อง Horz ในเว บเพจจะจ ดข อความบรรท ดน นอย ก งกลาง ตารางตาท กาหนด ด งร ป

15 การก อปป และจ ดวางเน อหาจากเอกสาร Office การก อปป ข อความหร อเน อหาท อย ในไฟล เอกสาร Office อย างเช น Word หร อ Excel มาวางบนเว บ เพจ ม 2 ข นตอนด งน ข นตอนท 1 ก อปป เน อหาจากไฟล งานเอหสารต นฉบ บ 1. เป ดไฟล เอกสาร Office ท ต องการก อปป 2. เล อกข อความหร อเน อหาท ต องการก อปป 3. คล กเมาส ขวาบนข อความ แล วเล อกคาส ง Copy

16 ข นตอนท 2 วางเน อหาลงในเว บเพจท สร างด วย Dreamweaver 1. วางเคอร เซอร ตรงตาแหน งท ต องการวางข อความ 2. คล กเมน Edit > Past Special จากน นจะปรากฏหน าต าง Paste Special ข นมาให เล อกร ปแบบการจ ดวาง

17 3. ร ปแบบการจ ดวางข อความท ก อปป มา สามารถเล อกได ด งน - Text only วางเฉพาะข อความอย างเด ยว แต ไม ม การจ ดร ปแบบใดๆ - Text with structure (paragraphs, lists, tables, etc.) วางข อความตามร ปแบบ โครงสร างต นฉบ บ เช น จ ดย อหน า, จ ดล สต ลาด บ, ตาราง เป นต น - Text with structure plus basic formatting (bold, italic) วางข อความตามร ปแบบ ล กษณะข อความต นฉบ บ เช น ต วหนา ต วเอ ยง เป นต น - Text with structure plus full formatting (bold, italic, styles) วางข อความตาม ร ปแบบล กษณะข อความต นฉบ บ รวมท งร ปแบบสไตล ท ใช จ ดข อความด วย - Retain line breaks คงล กษณะการแบ งบรรท ดตามต นฉบ บ - Clean up Word paragraph spacing ล างค าระยะห างระหว างย อหน าท ก าหนดไว ใน Word ออก 4. คล กป ม OK จะได เว บเพจท แสดงข อความท ก อปป จากโปรแกรม Word